<template>
  <div class="app-container">
    <template>
      <el-table :data="classify" :height="heights" border style="width: 100%">
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="name" label="类别名称">
          <template slot-scope="scope">
            <!-- {{scope.$index}} -->
            <div v-if="!scope.$index">
              <el-input
                size="small"
                v-model="form.name"
                @keydown.enter="addClk"
                placeholder="请输入内容"
              ></el-input>
            </div>

            <div v-else @dblclick="dbClk(scope.$index, scope.row.name)">
              <el-input
                @blur="updateEnter(scope.row.id, scope.row.name)"
                v-if="index == scope.$index"
                v-focus
                size="small"
                v-model="input"
                placeholder="请输入修改内容"
              ></el-input>
              <el-button v-else type="primary" size="small" plain>{{
                scope.row.name
              }}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
            <div v-if="!scope.$index">
              <el-button @click="addClk" type="success" size="small"
                >保存</el-button
              >
            </div>
            <div v-else>
              <el-button
                @click="updateEnter(scope.row.id, scope.row.name, true)"
                type="warning"
                size="small"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteClk(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      form: {
        name: "",
        type: ""
      },
      index: null,
      input: "",
      heights: '70vh'
    };
  },
  mounted() {
    this.getlist();
  },

  methods: {
    ...mapActions("classify", [
      "getlist",
      "addlist",
      "updatelist",
      "deletelist"
    ]),
    ...mapMutations("classify", ["SET_FORM"]),
    async updateEnter(id, name, isClk) {
      if (!this.input.length || this.input == name) {
        this.index = null;
        return;
      }

      let isTrue = this.classify.find(v => v.name == this.input);
      if (isTrue && !isClk) {
        this.$message("输入的类别已存在");
        this.index = null;
        return;
      }

      let form = { id, name: this.input, type: "" };
      this.SET_FORM(form);
      await this.updatelist();
      if (!isClk) {
        this.$message({
          type: "success",
          message: "恭喜你修改成功"
        });
      }
      this.index = null;
    },
    deleteClk(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.deletelist(id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async addClk() {
      if (!this.form.name.length) {
        this.index = null;
        return;
      }
      let isTrue = this.classify.find(v => v.name == this.form.name);
      if (isTrue) {
        this.$message("输入的类别已存在");
        this.form.name = "";
        this.index = null;
        return;
      }
      if (!this.form.name.length) return;
      await this.addlist(this.form);
      this.$message({
        type: "success",
        message: "恭喜你新增成功"
      });
      this.form.name = "";
    },
    dbClk(index, name) {
      this.input = name;
      this.index = index;
    } //
  },
  computed: {
    ...mapState("classify", ["classify"])
  },
  directives: {
    focus: {
      inserted: function(el) {
        console.log(el);
        el.children[0].focus();
      }
    }
  }
};
</script>

<style scoped></style>
